<template>
	<view>
		<uni-search-bar 
		placeholder="请输入姓名或电话搜索" 
		v-model="personName" 
		@cancel="mycancel"
    @confirm="searchName"
		bgColor="white"
			></uni-search-bar>
    
    
   <view class="null-box" v-if="data.length == 0">
      <view class="null-image">
        <image src="../../../static/images/777.png" mode=""></image>
      </view>
      空空如也
    </view>
    
      
		<view class="" v-else>
			<!-- <uni-list>
				<uni-list-item thumb="../../../static/images/geren.png" thumbSize="lg" title="dachui" note="12323" rightText="详情" showArrow></uni-list-item>
			</uni-list> -->
			<view class="">
				<view class="list"  v-for="(item,index) in data">
					<view class="left">
						<view class="img-box"><image src="../../../static/images/组 118.png"></image></view>
						<view class="info-person" @click="todetail(item.id, item.personIdentityCard,item.personName,item.personPhone)">
							<view class="">{{item.personName}}</view>
							<view class="zi">{{item.personPhone}}</view>
						</view>
					</view>
          
					<view class="right" @click="toselectperson(item.id, item.personIdentityCard,item.personName,item.personPhone)">
						<view class="">详情&nbsp;</view>
						<uni-icons type="forward" size="14" color="#c1c1c1"></uni-icons>
					</view>
          
				</view>
<!-- 				<uni-card >
					<view style="width: 100%; height: 70px; text-align: center; line-height: 70px;">暂无数据</view>
				</uni-card> -->
			</view>

		</view>
    <view class="add-img">
    	<view class="imgbox">
    		<image src="../../../static/images/tianjia .png" @click="toaddperson()"></image>
    	</view>
    </view>
	</view>
</template>

<script>
  import myutil from '../../../common/util.js'
	export default {
		data() {
			return {
				  id:0,
				  isHeader:0,
				  orderBy: "",
				  pageNo: 0,
				  pageSize: 0,
				  personGroup: 0,
				  personIdentity: 0,
				  personName: "",
				  personProject:"",
				  personStatus: 0,
				  returnFields: "",
				  data:[],
          openType: null,
          allData: [] //存储第一次查出来的全部人员数据 不会变
				
			}
		},
		onLoad(options) {
      if(options.type != null){
        this.openType = options.type
        console.log(options);
      }
      
			this.getworker()
		},
		onShow() {
			this.getworker()
		},
		methods: {  
      mycancel(){
        this.data = this.allData
      },
			toaddperson(){
				uni.navigateTo({
					url:'./addperson?openType=' + this.openType
				})
			},
			
      getworker(){
        // 
        if(this.openType != null && this.openType == 0){
          console.log('查询包工头');
          this.getLabour()
          return 
        }
        
        uni.showLoading({
          title: '查询中'
        })
        
        console.log('查询劳工');
				uni.$post(this.path+'/person/query',{
					isHeader:this.isHeader, // 0就是查劳工
					pageNo:1,
					pageSize: 10000,
          personGroup: 10,
          personIdentity: 2,
          personStatus: 3
				}).then(res=>{
					console.log(res);
					if(res.code==200){
            uni.hideLoading()
            uni.showToast({
              title: '查询成功',
              icon: 'none',
              duration: 500
            })
						this.data=res.data.records;
            this.allData = res.data.records
						
					}
				})
			},
			
      // 查询包工头
      getLabour(){
        uni.showLoading({
          title: '人员加载中'
        })
        uni.$post(this.path + '/person/query',{
          isHeader: 1,
          pageNo: 1,
          pageSize: 1000,
          personGroup: 10,
          personIdentity: 3,
          personStatus: 3
        }).then(res => {
          uni.hideLoading()
          this.data=res.data.records;
          this.allData = res.data.records;
          let nameLIst = []
          this.allData.forEach(item => {
            // nameLIst.push(item.name)
          })
          this.$store.commit('labourNameList',nameLIst)
          console.log(res);
        })
        
      },
      
      todetail(id,idCode, name, phone){
        console.log(id);
        console.log(idCode);
				uni.navigateTo({
					url:'./upperson?id='+id + '&idCode=' + idCode + '&name=' + name + '&phone=' + phone
				})
			},
			
      toselectperson(id, idCode, name, phone){
				uni.navigateTo({
					url:'./selectperson?id='+ id + '&idCode=' + idCode + '&name=' + name + '&phone=' + phone
				})
			},
			
      searchName(e){
        if(e.value == ""){
          this.mycancel()
          return 
        }
        console.log(e);
				console.log('this.data',this.data);
        this.data = []
        if(myutil.isSalaryValid(e.value)){
          // 数字判断电话号码
          this.allData.forEach(item => {
            if(item.personPhone.indexOf(e.value) != -1){
              this.data.push(item)
            }
          })
        }else{
          this.allData.forEach(item => {
            if(item.personName.indexOf(e.value) != -1){
              this.data.push(item)
            }
          })
        }
        
			}
		}
	}
</script>

<style lang="scss" scoped>
  .null-box{
    margin-top: 140rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
	
	.list{
		display: flex;
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
		justify-content: space-between;
		align-items: center;
		height: 140rpx;
		border-radius: 5px;
		background-color: white;
		.left{
			width: 300rpx;
			height: 80rpx;
			display: flex;
      flex: 1;
			// justify-content: space-between;
			align-items: center;
			.img-box{
				width: 80rpx;
				height: 80rpx;
				margin-left: 10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info-person{
        float: left;
				width: fit-content;
				min-width: 500rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 90rpx;
				font-size: 13px;
				padding-left: 20rpx;
				.zi{
					font-size: 12px;
					color: #c1c1c1;
				}
				
			}
			
		}
		.right{
			margin-right: 10rpx;
			width: fit-content;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			font-size: 12px;
			color: #c1c1c1;
		}
	}
.add-img{
	height: 80rpx;
	margin: 0 auto;
	margin-top: 40rpx;
	width: 90%;
	.imgbox{
		width: 80rpx;
		height: 80rpx;
		float: right;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
</style>
